<template>
    <div>
        <div class="topBtn">
            <div class="sizeBig"><span>在线用户管理</span></div>
            <div>
                <el-button type="primary" icon="el-icon-delete" @click="offline">强制下线</el-button>
                <el-button type="primary" icon="el-icon-search" @click="sendMessage">发送消息</el-button>
            </div>
        </div>
        <div class="message">
            <p class="character">1.可以查看当前登录系统的用户、地址等数据</p>
            <p class="character">2.可以给在线用户发送消息，通告等等；可以在系统维护或者临时紧急发布版本时，将在线用户强制下线。 <span class="skip">查看帮助文档</span></p>
        </div>
        <div class="inputcontent">
            <el-input v-model="search" placeholder="请输入内容" class="inSearch"></el-input>
            <div class="iconSearch"></div>
        </div>
        <div class="tablesize">
            <Table :reset="reset" v-on:getId="getListId" v-on:userId="userId"></Table>
        </div>
         <div class="block">
            <el-pagination
            :page-sizes="[10]"
            :page-size="10"
            @current-change="handleCurrentChange"
            layout="total, sizes, prev, pager, next, jumper"
            :total=total>
            </el-pagination>
        </div>
        <!-- 单 -->
        <el-dialog
            title="需要发送的消息"
            :visible.sync="dialogVisible"
            width="500px"
            >
            <el-input
                type="textarea"
                :rows="5"
                placeholder="请输入内容"
                v-model="textarea">
            </el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="sendMessageConfirm">确 定</el-button>
            </span>
        </el-dialog>
<!-- 多 -->
        <el-dialog
            title="需要发送的消息"
            :visible.sync="alldialogVisible"
            width="500px"
            >
            <el-input
                type="textarea"
                :rows="5"
                placeholder="请输入内容"
                v-model="alltextarea">
            </el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="alldialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirm">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import Table from './components/onlineTable'
import operation from '@/mixins/operation'
import {delay} from '@/utils/autoSearch'

export default {
    name:'userControl',
    mixins:[operation],
    components:{
        Table
    },
    data(){
        return{
            module:'online',    //online数据请求
            alldialogVisible:false,  //多个的弹出框
            search:'',   //搜索条件
            checkIds:'',  //table的勾选id
            textarea:'',  //需要发送的数据
            alltextarea:'',  //批量发送弹出框
            dialogVisible:false,  // 模态框不显示
            id:'', //点击发送消息的id值
        }
    },
    watch: {
        //用来监听页面变量的改变
        //监听搜索，300ms执行一次fetchData方法（去搜索）
        search() {
            delay(() => {
                this.fetchData();
            }, 300);
        }
    },
    methods:{
        confirm(){
            let listid=''
            this.checkIds.forEach(el => {
                listid+=el+','
            });
            listid=listid.substr(0,listid.length-1)
            let getInfo=JSON.parse(localStorage.getItem('getInfo')).UserID
            this.Proxy.invoke("serverPrivateSendMsg",this.alltextarea, getInfo, listid).then(()=>{
                this.alldialogVisible=false
                this.$message({
                message: '发送成功',
                type: 'success'
                });
            })
        },
        userId(data){
            console.log(data)
            this.id=data
        },
        sendMessageConfirm(){
            let getInfo=JSON.parse(localStorage.getItem('getInfo')).UserID
            this.Proxy.invoke("serverPrivateSendMsg",this.textarea, getInfo, this.id).then(()=>{
                 this.dialogVisible=false
                 this.$message({
                message: '发送成功',
                type: 'success'
                });
            })
        },
        handleCurrentChange(val){
            this.initialize({keyName:this.search,userStatu:0,isActive:1,page:val,pageSize:1})
        },
        // 自动搜索的方法
        async fetchData(val){
            this.initialize({keyName:this.search,userStatu:0,isActive:1,page:1,pageSize:1})
        },
        getListId(listId){
            this.checkIds=listId
        },
        offline(){
            if(this.checkIds>0){
                let listid=''
                this.checkIds.forEach(el => {
                    listid+=el+','
                });
               listid=listid.substr(0,listid.length-1)
                this.$confirm('是否踢出这几名用户?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
               proxy.invoke("serverKickUser",listid);
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
                });
            }else{
                alert('请勾选需要强制下线的员工')
            }
        },
        sendMessage(){
            if(this.checkIds>0){
                this.alldialogVisible=true
            }else{
                alert('请勾选需要发送消息的员工')
            } 
        }
    },
    created(){
        this.initialize({keyName:this.search,userStatu:-1,isActive:1,page:1,pageSize:10})
    }
}
</script>

<style lang="scss" scoped>
.sizeBig{
    font-size: 16px;
}
.topBtn{
    height: 60px;
    width: 98%;
    margin: 0 auto;
    line-height: 60px;
    display: flex;
    justify-content: space-between;
}
.message{
    width:98%;
    margin: 0 auto;
    height:100px;
    background:rgba(255,255,255,1);
    border:1px solid rgba(238,238,238,1);
    font-size:14px;
    .character{
        margin: 20px 0 21px 20px;
        color:#999999;
        .skip{
            color: #0095FF;
            margin-left:10px;
            cursor:pointer;
        }
    }
}
.inputcontent{
    width:98%;
    margin: 0 auto;
    height: 80px;
    position: relative;
    padding-top:21px;
    box-sizing: border-box;
    .iconSearch{
        position: absolute;
        left: 277px;
        top:30px;
        width:20px;
        height: 20px;
        background-image: url('./image/搜索.png') ;
        background-repeat: no-repeat;
        cursor:pointer;
    }
    .inSearch{
        width:308px;
        height:40px;
    }
}
.tablesize{
    width:98%;
    margin: 0 auto;
}
.block{
    text-align: right;
    margin:28px 20px 0 0;
}
</style>
